<template>
	<view class="content">
		<!-- <image src="../../static/index/bg.png" class="bg" mode=""></image> -->
		<view class="header" :style="'padding-top:'+(barHeight+10)+'px'">
			<view class="top_box">
				<view class="navBox">
					<view v-for="(item,index) in activeList" :key="index" class="nav" :class="{'active':active==index}"
						@click="changeType(index)">{{item}}
						<image v-if="active == index" src="@/static/discover/act.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="choosetopic">
				<scroll-view scroll-x="true" :show-scrollbar='true' style="white-space: nowrap;" @scrolltolower="lower">
					<view class="navBoxs">
						<view class="nav" :class="{'active':topic_ids==''}" @click="select('')">
							<image v-if="topic_ids== ''" src="@/static/discover/wstopic.png" mode=""></image>
							<image v-else src="@/static/discover/stopic.png" mode=""></image>
							全部话题
						</view>
						<view v-for="(item,index) in topic" :key="index" class="nav"
							:class="{'active':topic_ids==item.id}" @click="select(item.id)">
							<image v-if="topic_ids== item.id" src="@/static/discover/wstopic.png" mode=""></image>
							<image v-else src="@/static/discover/stopic.png" mode=""></image>
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<scroll-view scroll-y="true" class="main" @scrolltolower="lower">
			<u-skeleton class="u-m-t-30" rows="5" :loading="loadings" :title="false" rowsHeight='60'>
				<custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" :columnSpace="1" imageKey="coverimage"
					:seat="2" @wapperClick="detail" @imageClick="detail">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
						<view class="word">{{item.content}}</view>
						<view class="cont_list_item_bottom">
							<view class="cont_list_item_bottom_one">
								<image :src="$oss(item.avatar)" mode=""></image>
								<text class="name">{{item.name}}</text>
							</view>
							<view class="cont_list_item_bottom_two" v-if="item.distance">
								<image src="@/static/discover/position.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="item">
							<view class="citybox">
								{{item.province}}
							</view>
							<view class="word">{{item.content}}</view>
							<view class="cont_list_item_bottom">
								<view class="cont_list_item_bottom_one">
									<image :src="$oss(item.avatar)" mode=""></image>
									<text class="name">{{item.name}}</text>
								</view>
								<view class="cont_list_item_bottom_two" v-if="item.distance">
									<image src="@/static/discover/position.png" mode=""></image>
									{{item.distance}}km
								</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</u-skeleton>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;"
				icon="/static/none.png">
			</u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				activeList: ['推荐', '同城', '关注'],
				active: 0,
				seach: '',
				barHeight: 0,
				topic: '',
				topic_ids: '',
				city: '',
				lng: '',
				loadings: true,
				lat: '',
				list: [],
				finish: false,
				page: 1,
				_freshing: false,
			}
		},
		onPullDownRefresh(){
			this.onRefresh()
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getTopic()
			this.getInfo()
		},
		methods: {
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.reload()
			},
			...mapActions(['getLocation']),
			detail(item) {

				if (item.type == 1) {
					this.$goTo('/pages/discover/video?id=' + item.id)
				} else {
					this.$goTo('/pages/discover/detail?id=' + item.id)
				}
			},
			select(id) {
				this.topic_ids = id
				this.reload()
			},
			getTopic() {
				this.$api.post('/topic').then(res => {
					if (res.code == 1) {
						this.topic = res.data
					}
				}).catch((res) => {

				})
			},
			changeType(jobtype) {
				if (this.active !== jobtype) {
					this.active = jobtype
				}

				this.reload()
			},
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = this.$store.state.location
				this.reload()
			},
			reload() {
				if (this.$refs.waterfallsFlowRef) {
					this.$refs.waterfallsFlowRef.refresh()
				}
				this.loadings = true
				this.page = 1;
				this.finish = false
				this.list = []
				this.getList()
			},
			lower() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/discoverlist', {
					...this.location,
					page: this.page,
					type: this.active,
					topic_ids: this.topic_ids
				}).then(res => {
					this._freshing = false;
					uni.stopPullDownRefresh();
					if (res.code == 1) {
						this.loadings = false
						res.data = res.data.map(value => {
							value.coverimage = this.$oss(value.coverimage)
							return value
						})
						this.list = this.list.concat(res.data)

						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
					this._freshing = false;
					uni.stopPullDownRefresh();
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7FA;
	}

	.content {
		// padding: 30rpx;
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		display: flex;
		flex-direction: column;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 486rpx;
		}

		.header {
			z-index: 100;
			padding: 30rpx 30rpx 20rpx;
			border-radius: 0 0 30rpx 30rpx;
			background: #fff;
		}

		.choosetopic {
			padding: 30rpx 0 10rpx;
			z-index: 10;

			strong {
				font-size: 30rpx;
				margin: 30rpx 0;
			}

			.navBoxs {
				display: flex;
				align-items: center;

				.nav {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #1C274C;
					background-color: #F7F7FA;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;

					&:nth-child(n+2) {
						margin-left: 30rpx;
					}

					image {
						margin-left: 20rpx;
						width: 23rpx;
						height: 20rpx;
					}
				}

				.active {
					font-size: 26rpx;
					color: #fff;
					background-color: #00CE9B;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
				}
			}
		}


		.top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 90vw;

			.navBox {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nav {
					font-size: 32rpx;
					color: #959AAC;
					position: relative;

					image {
						width: 40rpx;
						height: 18rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.active {
					color: #000;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		.top_box_right {
			margin-left: 50rpx;
			display: flex;
			padding: 0 20rpx;
			width: 50%;
			justify-content: space-between;
			align-items: center;
			height: 66rpx;
			border-radius: 33rpx;
			border: 3rpx solid #1C274C;

			image {
				width: 27rpx;
				height: 26rpx;
			}
		}

		.collapses_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.collapses {
				padding: 20rpx 20rpx;
				background: #F7F7FA;
				border-radius: 20rpx;
				display: flex;
				align-items: center;

				&:nth-child(n+1) {
					margin: 20rpx;
				}

				image {
					width: 30rpx;
					height: 29rpx;
					margin-right: 20rpx;
				}
			}
		}

		.main {
			flex: 1;
			overflow: hidden;
			padding: 20rpx 10rpx 0;
			box-sizing: border-box;
			z-index: 10;

			.word {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
			}

			.cont_list_item_bottom {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 20rpx;

				.cont_list_item_bottom_one {
					display: flex;
					align-items: center;

					image {
						width: 38rpx;
						height: 38rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					.name {
						font-size: 23rpx;
					}
				}

				.cont_list_item_bottom_two {
					display: flex;
					align-items: center;
					color: #8D93A5;

					image {
						width: 20rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.cont_list {
			padding: 20rpx 30rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.cont_list_item {
				display: flex;
				flex-direction: column;
				margin: 20rpx 0;
				justify-content: space-between;
				width: 330rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				.cover {
					width: 100%;
					height: 485rpx;
					border-radius: 10rpx;
				}

				.word {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					padding: 10rpx 20rpx;
					font-size: 28rpx;
				}

				strong {
					padding: 0 20rpx;
					font-size: 24rpx;
				}

				.cont_list_item_bottom {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx;

					.cont_list_item_bottom_one {
						display: flex;
						align-items: center;

						image {
							width: 38rpx;
							height: 38rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						.name {
							font-size: 23rpx;
						}
					}

					.cont_list_item_bottom_two {
						display: flex;
						align-items: center;
						color: #8D93A5;

						image {
							width: 20rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	::v-deep .column-value {
		position: relative;
		.citybox{
			position: absolute;
			background: rgba(0, 0, 0, 0.5);
			padding: 5rpx 20rpx;
			border-radius: 15rpx;
			color: #fff;
			top: 10rpx;
			left: 10rpx;
		}
	}
</style>